/**
 * Created by hejg on 2018/5/17.
 */
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {View} from 'react-native';
import Style from './Style';

export default class ProgressBar extends Component {
    render() {
        return (
            <View
                style={{backgroundColor:Style.color.lightGray,height:this.props.height,borderRadius:this.props.height/2,width:'100%'}}>
                <View
                    style={{backgroundColor:this.props.color,height:this.props.height,borderRadius:this.props.height/2,width:`${this.props.ratio}%`}}>
                </View>
            </View>
        );
    }
}

ProgressBar.propTypes = {
    height: PropTypes.number.isRequired,
    color: PropTypes.string.isRequired,
    ratio: PropTypes.number.isRequired
};

ProgressBar.defaultProps = {
    height: 8
};